import Shepherd from 'shepherd.js';
import {offset} from '@floating-ui/dom';

export default function setup() {
	const tour = new Shepherd.Tour({
		useModalOverlay: true,
		defaultStepOptions: {
			scrollTo: true,
			modalOverlayOpeningPadding: 10,
			modalOverlayOpeningRadius: 4,
			cancelIcon: {
				enabled: true
			}
		},
	});

	tour.addStep({
		id: 'tour-select-chat-type',
		text: '第一步：选择交互方式',
		attachTo: {
			element: '#select-chat-type',
			on: 'right'
		},
		floatingUIOptions :{
			middleware: [offset(25)],
		},
		buttons: [
			{
				text: '下一步',
				action: tour.next
			}
		]
	});

	tour.addStep({
		id: 'tour-select-model',
		text: '第二步：选择模型',
		attachTo: {
			element: '#model-selector',
			on: 'bottom',
		},
		floatingUIOptions :{
			middleware: [offset(25)],
		},
		buttons: [
			{
				text: '上一步',
				action: tour.back
			},
			{
				text: '下一步',
				action: tour.next
			}
		]
	});

	tour.addStep({
		id: 'tour-start-chat',
		text: '第三步：开始对话',
		attachTo: {
			element: '#message-input',
			on: 'top'
		},
		floatingUIOptions :{
			middleware: [offset(25)],
		},
		buttons: [
			{
				text: '上一步',
				action: tour.back
			},
			{
				text: '完成',
				action: tour.complete
			}
		]
	});

	return tour;
}
